<template>
  <el-drawer
    class="xt-drawer"
    :size="size"
    :close-on-click-modal="closeOnClickModal"
    :append-to-body="appendToBody"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-drawer>
</template>

<script lang="ts">
export default {
  name: "xt-drawer",
};
</script>

<script lang="ts" setup>
interface PropType {
  size?: string | number;
  closeOnClickModal?: boolean;
  appendToBody?: boolean;
}

withDefaults(defineProps<PropType>(), {
  size: "72%",
  closeOnClickModal: false,
  appendToBody: true,
});
</script>

<style lang="scss">
.xt-drawer {
  &.el-drawer {
    .el-drawer__header {
      height: 56px;
      padding: 0 10px;
      margin-bottom: 0;
      line-height: 56px;
      box-shadow: 0 0 10px rgb(0 0 0 / 20%);
      box-sizing: border-box;
    }
  }
}
</style>
